<template>
  <div class="login">

    <div class="head">
      <span class="dengl">账号注册</span>
    </div>

    <div class="inputs">
      <input type="text" v-model="usernum" placeholder="请输入账号" class="zhk"><br>
      <input type="text" v-model="userpass" placeholder="请输入密码"><br>
      <input type="text" v-model="usercode" placeholder="请输入验证码"><img @click="getCode" :src="codeImg" alt=""><br>
      <van-button size="large" @click="onSubmit" class="anniu">注册</van-button>
    </div>

    <div class="zhuce">
      <span class="zc"></span>
      <span class="wj" @click="$router.go(-1)">返回登录</span>
    </div>

    <van-divider>其他登录</van-divider>

    <div class="imgs">
      <img src="@/assets/image/qq.png" alt="">
      <img src="@/assets/image/weixin.png" alt="">
      <img src="@/assets/image/weibo.png" alt="">
    </div>


  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      usernum: '',
      userpass: '',
      usercode: '',
      codeImg: '',
      code: '',
    }
  },
  created() {
    this.getCode()
  },
  methods: {
    toKuai() {
      this.$router.push('/loginkuai')
    },
    // 刷新验证码
    getCode() {
      axios({
        url: 'http://newstu.1000phone.net/fx/api/login/captcha',
        method: 'post',

      }).then(res => {
        console.log('验证码', res);
        this.code = res.data.authCode
        this.codeImg = res.data.img
      })
    },
    onSubmit() {
      let code = this.code
      let usercode = this.usercode
      let usernum = this.usernum
      let userpass = this.userpass
      if (usernum && userpass) {//非空验证
        if (usercode == code) {//允许注册
          //转圈圈
          this.$toast.loading('注册中');
          //调接口注册
          axios({
            url: '/api/member/add',
            method: 'post',
            data: {
              username: usernum,
              password: userpass
            }
          }).then(res => {
            console.log('注册', res);
            if (res.data.resultCode == 1) {
              //成功回显
              this.$toast.success('注册成功');
              //清空表单,刷新验证码
              this.usercode = ''
              this.usernum = ''
              this.userpass = ''
              this.getCode()
            } else {
              this.$toast.fail('注册失败');
            }
          }).catch(err => {
            console.log('注册出错', err);
            this.$toast.fail('注册出错');
          })
        } else {
          //刷新验证码
          this.getCode()
          //验证码置空,显示重新输入
          this.usercode = ''
          this.$toast.fail('验证码错误');
        }
      } else {
        this.$toast.fail('请输入账号或密码');
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.login {
  padding-top: 30%;

  .head {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    padding-left: 40px;
  }
}

.login .dengl {
  font-size: 20px;
  padding-right: 10px;
}

.login .kuai {
  color: #999999;
}

.login {
  .inputs {
    margin: 0 auto;
    display: flex;
    width: 80%;
    flex-direction: column;
    position: relative;

    img {
      width: 150px;
      position: absolute;
      right: 0;
      top: 170px;
    }

    input {
      margin-top: 30px;
      border: 0px solid #000;
      border-bottom: 1px solid #000;
      line-height: 30px;
    }

    .anniu {
      background-color: #1890FF;
      width: 100%;
      height: 40px;
      border-radius: 40px;
      margin-top: 30px;
      color: #fff;
    }
  }
}





.zc {
  margin-right: 40px;
  color: #1890FF;
}

.zhuce {
  margin-top: 10px;
  color: #1890FF;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.zhk {
  margin-top: 40px;
}

.qtdl {
  margin-top: 100px;
}

.qtdl .qt {
  font-size: 10px;
}

.login .imgs {
  width: 100%;
  display: flex;
  justify-content: space-around;

  img {
    width: 40px;
  }
}
</style>
